 <template>
	<notice :notice.sync="notice"></notice>
	<header-class action="student" :class-info.sync="classInfo"></header-class>

	<div class="container">
	    <div class="loading-class" v-if="indexLoading">
			<i class="fa fa-spinner fa-spin fa-3x"></i>
		</div>
	    <div class="row stus-title">
	        <div class="col-md-4 col-md-offset-2 info">
	            使用代码邀请同学加入课堂 : {{classInfo.cla_code}}
	        </div>
	        <div class="col-md-2 class-number info">
	            班级人数 : <span>{{classInfo.cla_stu_num}}</span>
	        </div>
	    </div>
	    <div class="row">
	        <div class="col-md-8 col-md-offset-2" v-if="!indexLoading">
                <table class="table table-hover stuInfo-table" v-if="students.length>0">
                    <tr class="table-header">
                        <th>学号</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                    </tr>
                    <tr v-for="stu in students" transition="fade">
                        <td>{{stu.stu_number}} <span class="text-muted">{{stu.stu_email==user.id?'(自己)':''}}</span> </td>
                        <td>{{stu.stu_name}}</td>
                        <td>{{stu.stu_email}}</td>
                    </tr>
                </table>
                <div class="no_stu" v-else>
                    <p v-if="!searchText">本班级暂时没有其他学生加入</p>
                    <p v-else>查找不到相关学生</p>
                    <p>使用以下代码邀请同学加入课堂 ：{{123456}}</p>
                </div>
            </div>
	    </div>
	    <div class="row" v-if="!loading">
            <div class="col-md-3 col-md-offset-5">
                <pagenation v-if="pageInfo.page>1"
                			:page-info="pageInfo"
                			@update-np="updatePage">
                </pagenation>
            </div>
	    </div>
	</div>
	
</template>

<script>
	import HeaderClass from '../../Component/HeaderClass/HeaderClass';
	import Pagenation from '../../Component/Pagenation/Pagenation';
	import Modal from '../../Component/Modal/Modal';
	import Notice from '../../Component/Notice/Notice';
	import auth from '../../Component/Auth/auth';

	export default {
		created: function() {
			this.claId = location.search.slice(1).split('=')[1];
			this.getStus();
		},
		data() {
			return {
				claId: -1,
				user: auth.getInfo(),
				notice: {type: 0, msg: ""},
				classInfo: {},
				students: [],
				pageInfo: {},
				indexLoading: false,
				searchText: ''
			}
		},
		components: {
			HeaderClass,
			Pagenation,
			Modal,
			Notice
		},
		methods: {
			getStus: function(bySearch, np) {
				if (this.indexLoading) return;
				if (bySearch) bySearch = !!(this.searchText);

				if (bySearch) {
					this.indexLoading = true;
					this.$http.post('/Student/search', {cla_id: this.claId, keyword: this.searchText}).then(function(resp) {
			        	this.indexLoading = false;
			            if (resp.data.status === 1) {
			        		resp.data.data.forEach((el) => {
			        			el.checked = false;
			        		})
			        		this.students = resp.data.data;
			        	}
				    }, function(resp) {
				        // error callback
				        this.indexLoading = false;
				        this.notice = {type: 0, msg: resp.statusText};
				    })
				} else {
					this.indexLoading = true;
					this.$http.post('/classStudent/classStuInfo', {cla_id: this.claId, np: np||1}).then(function(resp) {
			        	this.indexLoading = false;
			        	if (resp.data.status === 1) {
			        		resp.data.data.student.forEach((el) => {
			        			el.checked = false;
			        		})
			        		this.students = resp.data.data.student;
			        		this.pageInfo = resp.data.data.pageInfo;
			        	}
				    }, function(resp) {
				        // error callback
				        this.indexLoading = false;
				        this.notice = {type: 0, msg: resp.statusText};
				    })
				}
				
			},
			updatePage: function(np) {
				if (np == this.pageInfo.np)
					return
				this.getStus(false, np);
			},
		},
		watch: {
			searchText: function() {
				if (this.searchText === '') // 查询所有学生
					this.getStus(false);
			}
		}
	}
</script>

<style>
	#dropdown_os{
	    display: inline-block;
	    width: 60px;
	    height: 25px;
	    text-align: center;
	    border: 1px solid silver;
	    margin-right: 30px;
	}
	#dropdown_os a{
	    font-size: 15px;
	    color: black;
	}
	.table{
	    background-color: #fff;
	}
	.table .table-header{
	    background-color: #f5f5f5;
	}
	.modal-table {
		height: 300px;
		overflow: auto;
	}
	.stuInfo-table > tbody > tr > th, 
	.stuInfo-table > tbody > tr > td {
	    height: 50px;
	    text-align: center;
	    vertical-align: middle;
	}
	.modal-table th,
	.modal-table td {
		text-align: center;
	    vertical-align: middle;
	}
	.no_stu{
	    width: 100%;
	    height: 200px;
	    background-color: #e5e5e5;
	    text-align: center;
	    font-size: 20px;
	    padding-top: 50px;
	}
	#applyStuModel .modal-body,#addStuModel .modal-body #content{
	    height: 300px;
	    overflow-y: scroll;
	}
	/*返回班级管理的动画效果*/
	.navbar-header .left{
	    -webkit-transition: 1s ease-out all;
	    -moz-transition: 1s ease-out all;
	    -ms-transition: 1s ease-out all;
	    -o-transition: 1s ease-out all;
	    transition: 1s ease-out all;
	}
	.navbar-header .left:hover{
	    -webkit-transform: translate(-15px,0px);
	    -moz-transform: translate(-15px,0px);
	    -ms-transform: translate(-15px,0px);
	    -o-transform: translate(-15px,0px);
	    transform: translate(-15px,0px);
	}
	.stus-title {
		margin-bottom: 20px;
	}
	.stus-title .info {
		line-height: 40px;
		font-size: 16px;
	}
	.stuInfo-table {
		border: 1px solid #dce4ec;
	}
	.stuInfo-table tr td.edit-stu span[class$=remove],
	.stuInfo-table tr:hover td.edit-stu span[class$=horizontal]  {
		display: none;
	}
	.stuInfo-table tr:hover td.edit-stu span[class$=remove] {
		cursor: pointer;
		display: block;
	}
	.fade-transition {
		transition: all .8s ease;
		opacity: 1;
	}
	.fade-enter, .fade-leave {
		opacity: 0;
	}
</style>